import {designComponent} from "plain-ui-composition";
import {MdcTable} from "./process/processTableString";
import {PropType} from 'plain-ui-composition'

import {Markdown} from "./markdown/markdown";

export const MdcTableComponent = designComponent({
    props: {
        mdc: {type: Object as PropType<MdcTable>, required: true}
    },
    setup({props}) {

        let {content, desc} = props.mdc
        if (!!desc) {
            content = `${desc.trim()}\n${content}`
        }

        return {
            render: () => (
                <div class={`pl-mdc-table pl-mdc-table-${props.mdc.tableType}`}>
                    <h2>API：{props.mdc.title}</h2>
                    <Markdown md={content}/>
                </div>
            )
        }

    },
})
